<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="66家" data-page-identification="a_9u6s3fmeru">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_nvihmbbq8a 自定义模板_9fd5h9etp1 -->
            <!--      编辑状态-->
            <a-modal
                :visible="state.editStatusVisible"
                title="编辑"
                centered
                @ok="confirmItemStatus"
                @cancel="cancelItem"
                width="550px"
            >
                <div class="check-box">
                    <a-checkbox-group
                        v-model:value="state.submitData"
                        name="projectId"
                        style="display: flex; flex-wrap: wrap"
                    >
                        <a-checkbox
                            v-for="(item, index) in state.checkDataSource"
                            :key="item.id"
                            :value="item.projectId"
                            style="flex: 0 0 100%"
                        >
                            {{ item.projectName }}
                        </a-checkbox>
                    </a-checkbox-group>
                </div>
            </a-modal>
            <!--      编辑状态-->
            <!--          备注-->
            <a-modal
                :visible="state.remarksVisible"
                title="备注"
                centered
                @ok="confirmRemarks"
                @cancel="cancelRemarks"
                width="600px"
            >
                <a-textarea :rows="4" v-model:value="state.inputRemarks" />
            </a-modal>
            <!--          备注-->
            <div class="body">
                <div class="main">
                    <div class="table-tip">
                        <div class="left-top">
                            <div class="tip-title">66家最新数据调研 </div>
                            <div class="tip1" v-for="(item, index) in tipList"
                                ><span class="tip-msg">{{ item.title }}</span
                                ><div class="box1" :style="{ backgroundColor: item.color }"></div
                            ></div>
                        </div>
                        <div class="right-top">
                            <div>表头含下划线的字段支持双击表格编辑详细内容</div>
                            <a-space>
                                <!--                                <a-button-->
                                <!--                                    type="primary"-->
                                <!--                                    v-if="!state.isEditTable"-->
                                <!--                                    @click="handleEditStart"-->
                                <!--                                    size="small"-->
                                <!--                                    ghost-->
                                <!--                                    >编辑</a-button-->
                                <!--                                >-->

                                <!--                                <a-button type="primary" v-else @click="state.isEditTable = false" size="small" ghost-->
                                <!--                                    >完成</a-button-->
                                <!--                                >-->
                                <a-button type="primary" size="small" @click="showRemarks">备注</a-button>
                            </a-space>
                        </div>
                    </div>
                    <div class="kb-table-box">
                        <a-table
                            :columns="currentColumns"
                            :dataSource="state.dataSource"
                            :scroll="{ y: '500px' }"
                            :pagination="false"
                            :loading="state.tableLoading"
                            bordered
                        >
                            <template #headerCell="{ column, title }">
                                <template
                                    v-if="
                                        ['模型构建目标项目数', '试运行目标项目数', '年底可验收项目数'].includes(title)
                                    "
                                >
                                    <div class="text-line-div">{{ title }}</div>
                                </template>
                            </template>

                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="column.dataIndex === 'modelGoalCount'">
                                    <div
                                        class="db-click"
                                        @dblclick="changeData(record.areaCode, 'modelGoalList', record)"
                                        >{{ text }}</div
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'testRunGoalCount'">
                                    <div
                                        class="db-click"
                                        @dblclick="changeData(record.areaCode, 'testRunGoalList', record)"
                                        >{{ text }}</div
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'yearCheckCount'">
                                    <div
                                        class="db-click"
                                        @dblclick="changeData(record.areaCode, 'yearCheckList', record)"
                                        >{{ text }}</div
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'completeModelCount'">
                                    <div
                                        class="color-div"
                                        :style="getStyle(record.modelGoalCount, record.completeModelCount)"
                                        >{{ text }}</div
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'completeTestRunCount'">
                                    <div
                                        class="color-div"
                                        :style="getStyle(record.testRunGoalCount, record.completeTestRunCount)"
                                        >{{ text }}</div
                                    >
                                </template>
                                <template v-if="column.dataIndex === 'yearCheckStr'">
                                    <div class="content-msg-last">{{ record.yearCheckStr }}</div>
                                </template>
                                <template v-if="column.dataIndex === 'completeModelStr'">
                                    <div class="container">
                                        <div class="box">
                                            <span class="title-font">已完成建模：</span
                                            ><div class="content-msg">{{ record.completeModelStr }}</div>
                                        </div>
                                        <div class="box">
                                            <span class="title-font">未完成建模：</span
                                            ><div class="content-msg">
                                                {{ record.noCompleteModelStr }}
                                            </div>
                                        </div>
                                        <div class="box">
                                            <span class="title-font">已完成试运行：</span>
                                            <div class="content-msg">{{ record.completeTestRunStr }}</div></div
                                        >
                                        <div class="box"
                                            ><span class="title-font">未完成试运行：</span
                                            ><div class="content-msg">
                                                {{ record.noCompleteTestRunStr }}
                                            </div></div
                                        >
                                    </div>
                                </template>
                            </template>
                        </a-table>
                    </div>
                    <div class="remarks">
                        <div class="marks-title"> 备注 </div>
                        <div class="remark-content">
                            <p v-for="part in state.remarks?.split('\n')" :key="part">{{ part }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- end vid_nvihmbbq8a 自定义模板_9fd5h9etp1 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    onMounted(async () => {
        getData()
        getRemarks()
    })
    const radioStyle = reactive({
        display: 'flex',
        height: '30px',
        lineHeight: '30px'
    })
    const state = reactive({
        tabList: [],
        isEditTable: false,
        dataSource: [],
        editStatusVisible: false,
        itemStatus: '',
        tableLoading: false,
        permission: false,
        checkType: '',
        checkDataSource: [],
        submitData: [],
        remarks: undefined,
        remarksVisible: false,
        inputRemarks: undefined
    })

    const customCellStyle = () => {
        return {
            style: {
                padding: '0'
            }
        }
    }
    const customOkCellStyle = () => {
        return {
            style: {
                padding: '4px 16px'
            }
        }
    }
    const tipList = [
        {
            title: '达成目标',
            color: '#73D13D'
        },
        {
            title: '未达成目标',
            color: '#F5222D'
        }
    ]

    const currentColumns = [
        {
            title: '区域',
            dataIndex: 'areaName',
            align: 'center',
            width: 150,
            ellipsis: true
        },
        {
            'title': '模型构建目标项目数',
            'dataIndex': 'modelGoalCount',
            ellipsis: true,
            width: 150,
            align: 'center'
        },
        {
            title: '已完成模型项目数',
            dataIndex: 'completeModelCount',
            ellipsis: true,
            width: 150,
            align: 'center',
            customCell: customCellStyle
        },
        {
            title: '试运行目标项目数',
            dataIndex: 'testRunGoalCount',
            ellipsis: true,
            width: 150,
            align: 'center'
        },
        {
            title: '已完成试运行项目数',
            dataIndex: 'completeTestRunCount',
            ellipsis: true,
            align: 'center',
            width: 150,
            customCell: customCellStyle
        },
        {
            title: '年底可验收项目数',
            dataIndex: 'yearCheckCount',
            align: 'center',
            ellipsis: true,
            width: 150
        },
        {
            title: '当前进展(已完成)',
            dataIndex: 'completeModelStr',
            align: 'center',
            ellipsis: true,
            width: 300,
            customCell: customOkCellStyle
        },
        {
            title: '当前进展(年底可验收)',
            dataIndex: 'yearCheckStr',
            ellipsis: true,
            align: 'center',
            width: 250
        }
    ]

    function getStyle(a, b) {
        if (a != b) {
            return {
                color: '#f5222d'
            }
        } else {
            return {
                color: '#73d13d'
            }
        }
    }
    // 获取数据
    function getData() {
        state.tableLoading = true
        get('/solution-ppm/api/v2/built-in-system-ppm/survey/search')
            .then(data => {
                if (data.code !== 200) {
                    state.dataSource = []
                    message.error(data.message)
                    return
                }

                state.dataSource = data.data
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    // 确定更改
    function confirmItemStatus() {
        if (state.checkType === 'modelGoalList') {
            currentData.value.modelGoalList = state.submitData
        } else if (state.checkType === 'testRunGoalList') {
            currentData.value.testRunGoalList = state.submitData
        } else if (state.checkType === 'yearCheckList') {
            currentData.value.yearCheckList = state.submitData
        }
        put(`/solution-ppm/api/v2/built-in-system-ppm/survey/modify`, currentData.value).then(data => {
            if (data.code !== 200) {
                state.dataSource = []
                message.error(data.message)
                return
            }
            state.editStatusVisible = false
            message.success(data.message)
            getData()
        })
    }
    // 取消修改
    function cancelItem() {
        state.editStatusVisible = false
        state.itemStatus = ''
    }

    function handleEditStart() {
        state.isEditTable = true
    }
    const currentData = ref({})
    function changeData(areaCode, type, record) {
        // if (!state.isEditTable) {
        //     return
        // }
        state.checkType = type
        currentData.value = record
        get(`/solution-ppm/api/v2/built-in-system-ppm/survey/get_area_project/${areaCode}`).then(data => {
            if (data.code !== 200) {
                state.dataSource = []
                message.error(data.message)
                return
            }
            state.editStatusVisible = true
            if (state.checkType === 'modelGoalList') {
                state.submitData = currentData.value.modelGoalList
            } else if (state.checkType === 'testRunGoalList') {
                state.submitData = currentData.value.testRunGoalList
            } else if (state.checkType === 'yearCheckList') {
                state.submitData = currentData.value.yearCheckList
            }
            state.checkDataSource = data.data
        })
    }
    function showRemarks() {
        state.remarksVisible = true
        state.inputRemarks = state.remarks
    }
    function getRemarks() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/survey/remark`).then(data => {
            if (data.code !== 200) {
                state.dataSource = []
                message.error(data.message)
                return
            }
            state.remarks = data.data
        })
    }
    function confirmRemarks() {
        put(`/solution-ppm/api/v2/built-in-system-ppm/survey/remark`, {
            remark: state.inputRemarks
        }).then(data => {
            if (data.code !== 200) {
                state.dataSource = []
                message.error(data.message)
                return
            }
            message.success(data.message)
            state.remarksVisible = false
            getRemarks()
        })
    }
    function cancelRemarks() {
        state.remarksVisible = false
        getRemarks()
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/
    .page_root {
        width: 100%;
        height: 100%;
        background-color: #f0f2f5;
        overflow: auto;
    }
    .body {
        background-color: #f0f2f5;
        height: 100%;
    }
    .top-tab {
        height: 65px;
        padding: 16px 24px;
        background-color: #fff;
        margin-bottom: 16px;
        border-radius: 2px;
    }
    .kb-table-box {
        padding: 0 24px 16px 24px;
        border-radius: 2px;
        background-color: #fff;
    }
    .time-div {
        display: flex;
        flex-direction: column;
        height: 65px;
    }
    .reality-time,
    .plan-time {
        height: 32px;
        width: 100%;
        text-align: center;
        line-height: 32px;
    }
    .plan-time {
        border-bottom: 1px solid #d9d9d9;
    }
    .kb-table-box:deep(.@{ant-prefix}-table-thead) > tr > th {
        background: rgba(56, 117, 255, 0.2);
        color: #262626;
        font-weight: 600;
        padding: 10px 4px;
        border-right: 1px solid #d9d9d9 !important;
    }
    .kb-table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 0px 16px;
        word-break: break-all;
    }

    .record-top,
    .record-bottom {
        display: flex;
        height: 32px;
    }
    .record-top {
        border-bottom: 1px solid #d9d9d9;
    }
    .extension,
    .normal,
    .planning {
        width: 25%;
        height: 32px;
        background-color: orange;
    }
    .normal {
        background-color: normal;
    }
    .planning {
        background-color: planning;
    }
    .table-tip {
        background-color: #fff;
        display: flex;
        height: 45px;
        justify-content: space-between;
        padding: 0 24px;
        align-items: center;
    }

    .finish,
    .running,
    .daily {
        display: flex;
        line-height: 62px;
        margin-right: 13px;
    }

    .left-top {
        display: flex;
        justify-content: space-between;
    }

    .right {
        flex: 1;
        display: flex;
        justify-content: end;
    }

    .tip-msg {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }

    .running-box {
        background: #aae56a;
    }

    .daily-box {
        background: #faba32;
    }
    .main {
        padding-top: 8px;
        height: 100%;
        background-color: #fff;
    }
    .color-father {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .no-margin {
        margin: 0;
    }
    .region-title {
        height: 26px;
        background: #fef0cc;
        border-radius: 2px;
        padding-left: 6px;
        font-size: 12px;
        color: #595959;
        line-height: 26px;
        font-weight: 400;
        margin-bottom: 16px;
    }
    .no-data-img {
        width: 264px;
        height: 192px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .no-data-msg {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #595959;
    }
    .right-top {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 20px;
    }
    .tip-top-box {
        padding: 0 5px;
        border-radius: 2px;
        color: #fff;
        font-weight: 800;
    }
    .text-line-div {
        text-decoration: underline;
    }

    .db-click {
        min-height: 80px;
        line-height: 80px;
        cursor: pointer;
    }
    :deep(.ant3-checkbox-wrapper + .ant3-checkbox-wrapper) {
        margin: 0;
    }
    .color-div {
        height: 40px;
        line-height: 40px;
    }
    .box {
        display: flex;
        width: 50%;
        height: 50%; /* 19px, 38px 的一半 */
        line-height: 20px;
        box-sizing: border-box; /* 包含 padding 和 border */
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
    }
    .remarks {
        padding: 0 24px;
        background-color: #fff;
    }
    .remark-content {
        padding: 10px 14px;
        border-radius: 5px;
        border: 1px solid #d9d9d9;
        overflow: auto;
        width: 100%;
        height: 120px;
        overflow: auto;
    }
    .remark-content p {
        margin-bottom: 0;
    }
    .tip1 {
        margin-left: 24px;
        display: flex;
        align-items: center;
    }
    .box1 {
        width: 32px;
        height: 8px;
        margin-left: 8px;
    }
    .tip-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        line-height: 53px;
    }
    .title-font {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
    }
    .marks-title {
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 16px;
    }
    .content-msg {
        width: 200px; /* 设置固定宽度 */
        word-wrap: break-word; /* 允许长单词换行 */
        overflow-wrap: break-word; /* 处理溢出 */
        white-space: normal; /* 正常换行 */
        flex-shrink: 0; /* 防止内容缩小 */
        text-align: left;
    }
    .content-msg-last {
        width: 250px; /* 设置固定宽度 */
        word-wrap: break-word; /* 允许长单词换行 */
        overflow-wrap: break-word; /* 处理溢出 */
        white-space: normal; /* 正常换行 */
        flex-shrink: 0; /* 防止内容缩小 */
        text-align: left;
    }
    .kb-table-box :deep(.ant3-table-wrapper) {
        border-bottom: 1px solid #d9d9d9;
    }
</style>
